<!doctype html>

<html>

    <head>
        <title>Perspective.js demo</title>
        <style>
            canvas {
                border: gray solid 1px;
            }
        </style>
    </head>

    <body>
        <canvas id="canvas"></canvas>
        <script src="../dist/perspective.js"></script>
        <script>
            var canvas = document.getElementById("canvas");
            var image = new Image();
            image.onload = function() {
                canvas.width = image.width;
                canvas.height = image.height;
                var ctx = canvas.getContext("2d");
                var p = new Perspective(ctx, image);
                p.draw([
                        [30, 30],
                        [image.width - 50, 50],
                        [image.width - 70, image.height - 30],
                        [10, image.height]
                ]);
            }
            image.src = "firefox.jpg";
        </script>
    </body>

</html>
